<template>
	<view>
		<view class="lessons padding-top-sm" :class="ismanager?'ismanager':''">
			<view v-if="lessons.length==0 && showempty" class="text-empty">空空如也</view>
			<view v-else class="cu-card article">
				<view @click="bindTap(item.id)" class="cu-item ls-item shadow" v-for="(item, index) in lessons" :key="index">
					<view class="content">
						<image class="cover" :src="item.imgurl" mode="aspectFill"></image>
						<view class="desc">
							<view class="title text-cut">{{item.coursebrief}}</view>
							<view class="text-content text-warp">
								<text class="padding-right-sm" v-if="!ismanager">{{item.coursename || '认证讲师'}}</text>
								<text class="padding-right-sm" :class="'status'+item.status" v-else>{{item.state}}</text>
								{{item.section?'多章节':'单章'}}
							</view>
							<view class="text-content justify-between flex">
								<view class="text-red" v-if="iospay || device!='ios'">{{item.courseprice>0?'￥'+item.courseprice:'免费'}}</view>
								<view class="text-gray" v-else>{{item.updating?'连载':'完结'}}</view>
								<view v-if="!ismanager">{{item.studynumber}}人已学</view>
								<view v-else class="text-xxl" :class="showmenu==item.id?'text-red':''"><text class="cuIcon-more"></text></view>
							</view>
							<view class="cu-list menu padding-xs bg-white" v-if="ismanager" :class="showmenu==item.id?'active':''">
								<view class="cu-item" @click="naviTo('lesson/detail',{id:item.id})">
									<view class="content">
										<text class="cuIcon-attention text-yellow"></text>
										<text>预览</text>
									</view>
								</view>
								<view class="cu-item" @click="naviTo('lesson/post',{id:item.id})">
									<view class="content">
										<text class="cuIcon-edit text-blue"></text>
										<text>编辑</text>
									</view>
								</view>
								<view class="cu-item" @click="naviTo('lector/section',{id:item.id})" v-if="item.multiple">
									<view class="content">
										<text class="cuIcon-list text-green"></text>
										<text>章节</text>
									</view>
								</view>
								<view class="cu-item" @click="RmLesson(item.id,index)">
									<view class="content">
										<text class="cuIcon-delete text-red"></text>
										<text>删除</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	export default {
		name: 'lessons',
		props: {
			lessons : {
				type:Array,
				default:function(){
					return [];
				}
			},
			ismanager : {
				type:Boolean,
				default:false
			},
			showempty:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				showmenu : 0,
				platform : core.platform,
				iospay : core.system.iospay,
				device : core.device
			}
		},
		methods: {
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			bindTap(id){
				if(this.ismanager){
					if(this.showmenu==id){
						this.showmenu = 0;
					}else{
						this.showmenu = id;
					}
				}else{
					return core.navito('lesson/detail',{id:id});
				}
			},
			RmLesson(id,index=0){
				if(!id) return false;
				var that = this;
				return core.confirm('删除后将清理课程相关的章节、评价、收藏等数据且不可恢复','删除课程',function(){
					// core.get('lesson/remove',function(res){
					// 	if(res.type=='success'){
					// 		that.lessons.splice(index,1);
					// 	}
					// 	core.toast(res.message,res.redirect,res.type);
					// },{id:id})
					(that.$api.reqGet({
						url:"menu/deBycourse/"+id
					}).then(res=>{
						console.log(res)
						if(res.code==200){
							that.lessons.splice(index,1);
							core.toast("删除成功");
						}
					}))
				})
				console.log(lessons)
			},
		}
	}
</script>

<style>
.status0{color: #f37b1d;}
.status1{color: #39b54a;}
.status2{color: #aaaaaa;}
.ismanager .cu-card.article{padding-bottom: 200upx;}
.ls-item{overflow: visible !important;}
.ls-item.shadow{box-shadow:0 0 16upx 0 rgba(219,219,219,0.6); border-radius:0.26rem; padding-bottom: 8px; margin-bottom: 28px;}
.ls-item .cover{margin-top: -32upx; border-radius: 22upx; min-height: 4.86rem; min-width: 36vw;}
.ls-item .desc{max-width: calc(100% - 280upx); min-width: calc(100% - 275upx); position: relative;}
.ls-item .desc .title{padding: 0 !important; line-height: 68upx !important;}
.ls-item .desc .text-content{height: auto;}
.desc .cu-list{display: none; position: absolute; box-shadow:0px 4px 22px 0px rgba(0,0,0,0.14); width: 172upx; right: -14upx; top: 172upx; overflow: visible; z-index: 888;}
.desc .cu-list::before{content: ''; width: 20upx; height: 20upx; background: #FFFFFF; position: absolute; top: -8upx; right: 20upx; transform: rotate(45deg);}
.desc .cu-list.active{display: block;}
.desc .cu-list .cu-item{padding: 0; min-height: 64upx;}
.desc .cu-list .cu-item .content{padding: 0; line-height: 64upx;}
</style>
